
<template>
  <div class="trauma-quality">
    <el-form inline>
      <el-radio v-model="radioDate" label="1" @change="changeDate">
        <span style="margin-right: 5px;">指定日期</span>
        <el-form-item label="年份：">
          <el-date-picker v-model="year" type="year" value-format="yyyy" size="mini" :disabled="radioDate == 2"
            placeholder="选择年" />
        </el-form-item>
        <el-form-item label="季度：">
          <el-select v-model="quarter" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="第一季度" :value="1" />
            <el-option label="第二季度" :value="2" />
            <el-option label="第三季度" :value="3" />
            <el-option label="第四季度" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份：">
          <el-select v-model="month" size="mini" placeholder="请选择" :disabled="radioDate == 2">
            <el-option label="一月" :value="1" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="二月" :value="2" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="三月" :value="3" :disabled="quarter != '' && quarter != '1'" />
            <el-option label="四月" :value="4" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="五月" :value="5" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="六月" :value="6" :disabled="quarter != '' && quarter != '2'" />
            <el-option label="七月" :value="7" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="八月" :value="8" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="九月" :value="9" :disabled="quarter != '' && quarter != '3'" />
            <el-option label="十月" :value="10" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十一月" :value="11" :disabled="quarter != '' && quarter != '4'" />
            <el-option label="十二月" :value="12" :disabled="quarter != '' && quarter != '4'" />
          </el-select>
        </el-form-item>
      </el-radio>
      <el-radio v-model="radioDate" label="2" @change="changeDate">
        <span style="margin-right: 5px;">其他时间</span>
        <el-form-item label="">
          <el-date-picker v-model="monthRange" type="monthrange" start-placeholder="开始月份" end-placeholder="结束月份"
            size="mini" format="yyyy-MM" value-format="yyyy-MM" :disabled="radioDate == 1" />
        </el-form-item>
      </el-radio>
      <el-form-item label="">
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div v-loading="loading" class="box-echart">
      <el-card v-for="(item, index) in chartData" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ index + 1 }}、{{ item.itemName }}</span>
        </div>

        <quality-store-chart :chart-data="item.optionData" :index="item.itemIndex" :single-chart-data="singleChartData"
          @clickIcon="clickIcon" @clickZuo="clickZuo" @clickYou="clickYou" />
      </el-card>
    </div>
  </div>
</template>

<script>
import qualityStoreChart from '../qualityStore-chart'
import { getQuotaData } from '@/api/statistical/statisticTruma'
export default {
  name: 'ChestPainQuality',
  components: {
    qualityStoreChart
  },
  data() {
    return {
      loading: false,
      timeValue: 'quarter',
      diseaseType: 'trauma',
      indicatorsPlaceholder: '筛选指标',
      indicators: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      defaultKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      timeList: [{
        label: '季度',
        value: 'quarter'
      }, {
        label: '月度',
        value: 'month'
      }, {
        label: '年度',
        value: 'year'
      }],
      data: [{
        id: 1,
        label: '院前急救转运时间'
      }, {
        id: 2,
        label: '全身快速CT、胸部X片、骨盆X片和FAST完成时间'
      }, {
        id: 3,
        label: '急诊输血准备时间'
      }, {
        id: 4,
        label: '紧急手术术前准备时间'
      }, {
        id: 5,
        label: '急诊科停留时间'
      }, {
        id: 6,
        label: '严重创伤病人数量'
      }, {
        id: 7,
        label: '严重创伤病人病死率'
      }, {
        id: 8,
        label: '严重创伤病人平均住院时间'
      }, {
        id: 9,
        label: '严重创伤病人ICU平均住院时间'
      }, {
        id: 10,
        label: '信息预警比例'
      }, {
        id: 11,
        label: '人工气道建立时间'
      }, {
        id: 12,
        label: '创伤病人数量'
      }, {
        id: 13,
        label: '创伤病人病死率'
      }, {
        id: 14,
        label: '接收外院转诊病人比例'
      }, {
        id: 15,
        label: '转诊治疗的创伤病人比例'
      }, {
        id: 16,
        label: '创伤评分（GCS TI ISS）完成比例'
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      chartData: [],
      singleChartData: {},
      radioDate: '1',
      year: '',
      quarter: '',
      month: '',
      monthRange: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.chartData = []
      getQuotaData({
        hospitalId: this.$store.getters.hospitalId,
        classify: this.timeValue,
        indexes: this.indicators.join(','),
        year: this.year,
        quarter: this.quarter,
        month: this.month,
        startTime: this.monthRange.length > 0 ? this.monthRange[0] : '',
        endTime: this.monthRange.length > 0 ? this.monthRange[1] : '',
      }).then(res => {

        if (res.code === 0) {
          if (res.data && res.data.quotaItems.length > 0) {
            let getData = res.data.quotaItems
            getData.forEach(e => {
              e.itemIndex = e.itemIndex - 1
              let timeData = []
              let targetData = []
              e.itemData.forEach(ele => {
                if (ele.month) {
                  timeData.push(ele.year + "-" + ele.month)
                } else {
                  timeData.push(ele.year)
                }
                targetData.push(ele.quota ? ele.quota : 0)
              })

              console.log(timeData, targetData)
              e.optionData = {
                timeData: timeData,
                targetData: targetData,
                unit: e.itemUnit
              }
            })
            getData.forEach(el => {
              this.chartData.push(el)
            })
            console.log(getData)
            this.loading = false
          }
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    changeTime() {
      this.init()
    },
    clickIcon(index) {
      this.singleChartData = this.chartData[index]
    },
    clickZuo(index) {
      if (index === 0) {
        this.singleChartData = this.chartData[this.chartData.length - 1]
      } else {
        this.singleChartData = this.chartData[index - 1]
      }
    },
    clickYou(index) {
      if (index > this.chartData.length - 1 || index === this.chartData.length - 1) {
        this.singleChartData = this.chartData[0]
      } else {
        this.singleChartData = this.chartData[index + 1]
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.indicators.push(data.id)
      } else {
        this.indicators.splice(this.indicators.indexOf(data.id), 1)
      }
      this.init()
    },
    search() {
      this.init()
    },
    reset() {
      this.radioDate = '1'
      this.year = ''
      this.quarter = ''
      this.month = ''
      this.monthRange = []
      this.init()
    },
    changeDate(val) {
      console.log(val)
      if (val == 1) {
        this.monthRange = []
      } else if (val
        == 2) {
        this.year = ''
        this.quarter = ''
        this.month = ''
      }
    },
  }
}
</script>


<style lang="less" scoped>
.trauma-quality {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .box-chose {
    height: 80px;
    padding-left: 30px;
    padding-top: 20px;
  }

  .box-echart {
    height: ~'calc(100% - 80px)';
    overflow: auto;
    background: #f0f2f5;
    padding: 20px 20px 0 20px;

    .box-card {
      width: 32%;
      height: 506px;
      display: inline-block;
      margin: 0 10px;

      .el-card__body {
        height: ~'calc(100% - 55px)';
      }
    }
  }

  width: 100%;
  height: 100%;

  &_content {
    height: calc(100% - 59px);
    overflow-y: auto;
  }

  .dignosis-content {
    width: 100%;
    height: 400px;
    display: inline-block;

    .dignosis-style {
      display: inline-block;
      width: 50%;
      height: 100%;
    }
  }

  .treatment-process-card {
    height: 400px;
  }

  .box-card+.box-card {
    margin-top: 5px;
  }

  /deep/.el-radio__label {
    line-height: 38px;
  }
}
</style>